<template>
	<view class="stuList">
		<!-- 同学列表 -->
		<view class="stuList-item" v-for="(item,index) in stuList" :key="index" >
			<view class="top">
				<text class="s_name">{{item.s_name}}</text>
				<image src="../../static/nan.png" v-if="item.s_sex=='男'"></image>
				<image src="../../static/nv.png" v-if="item.s_sex=='女'"></image>
				<text>{{item.s_sex}}</text>
			</view>
			<view class="bottom">
				{{item.s_school}}
			</view>
		</view>
	</view>
</template>

<script>
	import AppConfig from '../../config/AppConfig.js';
	import {mapGetters} from 'vuex';
	export default {
		name:"stuList",
		data(){
			return {
				stuList:[]
			}
		},
		computed:{
			...mapGetters(["c_id"])
		},
		onLoad:function(){
			uni.setNavigationBarTitle({
				title:`${this.c_id}班同学`
			});
			uni.showLoading({
				title:'正在加载...'
			});
			uni.request({
				url:`${AppConfig.baseUrl}/Stu_info/getStuListByC_id/${this.c_id}`,
				success:res=>{
					uni.hideLoading();
					if(res.data.status=="success"){
						this.stuList=res.data.data;
					}
					else{
						uni.showToast({
							title:res.data.msg
						});
					}
				},
				fail:function(){
					uni.hideLoading();
					uni.showToast({
						title:'服务器错误'
					});
				}
			})
		}
	}
</script>

<style>
page {
	background-color: white;
}
</style>
<style scoped>

.stuList{
	box-sizing: border-box;
	padding: 0px 20px;
}
.stuList-item{
	min-height: 80px;
	display: flex;
	flex-direction: column;
	padding: 10px 0;
}
.stuList-item+.stuList-item{
	border-top: 1px solid #EBEBEB;
}
.stuList-item>.top>image{
	margin:0px 20px;
	width: 32px;
	height: 32px;
}
.stuList-item>.top{
	display: flex;
	flex-direction: row;
	font-size: 28px;
	align-items: center;
}
.stuList-item>.bottom{
	color: gray;
	font-size: 24px;
}
</style>
